<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart"  class="inMain" style="width: 139px;height: 218px"></div>
	</div>
</template>

<script>
	export default {
		name: 'internationEc4lt',
		data() {
			return{
				zData:[],
				nData:[]
			}
		},
		props:{
		    zgData:{
				type:Array,
				required:true
		    },
			ngData:{
				type:Array,
				required:true
			}
		},
		watch:{
		   zgData(zval){
			   
			   this.zData=zval
			   // console.log('bb',this.zData)
				this.$nextTick(()=>{
					this.myEcharts()
				})
		   },
		   ngData(nval){
			   this.nData=nval
			    // console.log('nb',this.nData)
				this.$nextTick(()=>{
					this.myEcharts()
				})
		   }
		},
		methods: {
			
			myEcharts() {
				let itemzData=this.zData.map(item=>{
					return item.sum
				})
				let itemnData=this.nData.map(item=>{
					return item.sum
				})
				// console.log(itemzData)
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart) ;  //通过ref获取到DOM节点
				if (myChart==null) {
				    myChart = this.$echarts.init(this.$refs.myChart);  //利用原型调取Echarts的初始化方法
				}
				//配置图表
				const option = {
					color:['#712ACE ','#F5AF0F'],
					legend: {
						show: true,
						itemWidth: 14,
						itemHeight: 14,
						textStyle: {
						      color: "#DFF8FF",
							  fontSize:15
						},
						data:['宁波','浙江']
					},
					grid: {
						// left: '12%',
						right: '3%',
						top: '10%',
						width: "60%",
						height:"90%",
						containLabel: true
					},
					xAxis: [{
						splitLine: {
							show: false
						},
						type: 'value',
						show: false,
						inverse:true,
					}],
					yAxis: [{
						splitLine: {
							show: false
						},
						axisLine: { //y轴
							show: false
						},
						type: 'category',
						axisTick: {
							show: false
						},
						inverse: true,
						 axisLabel: {
						      show: false
						    }
					}],
					series: [{
						name: '宁波',
						type: 'bar',
						barWidth: 7, // 柱子宽度
						barGap:1,
						label: {
							show: true,
							position: 'left', // 位置
							color: '#FFFFFF ',
							fontSize: 15,
							distance: 10, // 距离
							formatter: '{c}' // 这里是数据展示的时候显示的数据
						}, // 柱子上方的数值
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
							                    offset: 0,
							                    color: 'rgba(245, 215, 95, 1)'
							                }, {
							                    offset: 1,
							                    color: 'rgba(245, 175, 15, 1)' 
							                }], false), // 渐变
						},
						// data: [21, 21, 21]
						data:itemnData
					}, 
					{
						name: '浙江',
						type: 'bar',
						barWidth: 7, // 柱子宽度
						label: {
							show: true,
							position: 'left', // 位置
							color: '#FFFFFF ',
							fontSize: 15,
							distance: 10, // 距离
							formatter: '{c}' // 这里是数据展示的时候显示的数据
						}, // 柱子上方的数值
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
							                    offset: 0,
							                    color: 'rgba(152, 101, 224, 1)'
							                }, {
							                    offset: 1,
							                    color: 'rgba(113, 42, 206, 1)' 
							                }], false), // 渐变
						},
						// data: [51, 51, 51]
						data:itemzData
					}, 
					]
				};
				myChart.setOption(option);  //将编写好的配置项挂载到Echarts上
				window.addEventListener("resize", function() {
				    myChart.resize();  //页面大小变化后Echarts也更改大小
				});
			}
		},
		mounted() {
			this.myEcharts();
		}
	}
</script>


<style>

</style>
